enzyme简介——Airbnb的React测试框架

简介

Enzyme是一个React的JavaScript测试工具，使React组件的输出更加容易extrapolate 。
Enzyme的API和jQuery操作DOM一样灵活易用。（因为其使用的是cheerio库来解析虚拟DOM，而cheerio的目标则是做服务器端的jQuery）
Enzyme兼容大多数断言库和测试框架，如chai、mocha、jasmine等。

安装

npm i --save-dev enzyme

如果使用的是React 0.14或React 15.x，请确保以下模块已经安装

npm i --save-dev react-addons-test-utils
npm i --save-dev react-dom

基本用法

#### Shallow渲染

import React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';

import MyComponent from './MyComponent';
import Foo from './Foo';

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.length(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.length(1);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow(
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    );
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(
      <Foo onButtonClick={onButtonClick} />
    );
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});

#### 完整的DOM渲染

import React from 'react';
import sinon from 'sinon';
import { mount } from 'enzyme';

import MyComponent from './MyComponent';
import Foo from './Foo';

describe('<Foo />', () => {
  it('allows us to set props', () => {
    const wrapper = mount(<Foo bar="baz" />);
    expect(wrapper.props().bar).to.equal('baz');
    wrapper.setProps({ bar: 'foo' });
    expect(wrapper.props().bar).to.equal('foo');
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = mount(
      <Foo onButtonClick={onButtonClick} />
    );
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });

  it('calls componentDidMount', () => {
    sinon.spy(Foo.prototype, 'componentDidMount');
    const wrapper = mount(<Foo />);
    expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
    Foo.prototype.componentDidMount.restore();
  });
});

#### 静态渲染

import React from 'react';
import { render } from 'enzyme';

import Foo from './Foo';

describe('<Foo />', () => {
  it('renders three `.foo-bar`s', () => {
    const wrapper = render(<Foo />);
    expect(wrapper.find('.foo-bar').length).to.equal(3);
  });

  it('renders the title', () => {
    const wrapper = render(<Foo title="unique" />);
    expect(wrapper.text()).to.contain('unique');
  });
});

未来

完善CSS选择器

现在还不支持分层（hierarchical）选择器

完善事件模拟和对传播的支持

对于 shallow rendering，事件模拟有限制，事件传播也不支持，必须给出一个事件对象。

完善鼠标和键盘的模拟

很多react控件涉及表单输入框和复杂的鼠标交互，使用Enzyme提供的事件API来模拟显得笨重且不切实际。